{% zone "Header" %}
<!-- Header -->
<header class="masthead">
    <div class="container">
        <div class="intro-text">
            <div class="intro-lead-in">Welcome To Our Studio!</div>
            <div class="intro-heading text-uppercase">It's Nice To Meet You</div>
            <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
        </div>
    </div>
</header>
{% endzone %}

{% if Model.ContentItem.Content.Services.ContentItems.size > 0 %}
<!-- Services -->
<section id="services">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading text-uppercase">Services</h2>
                <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
            </div>
        </div>
        <div class="row text-center">
            {% for service in Model.ContentItem.Content.Services.ContentItems %}
            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                    <i class="fas fa-circle fa-stack-2x text-primary"></i>
                    <i class="fas {{ service.Service.IconClass.Text }} fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="service-heading">{{ service.DisplayText }}</h4>
                <p class="text-muted">{{ service.HtmlBodyPart.Html | raw }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

{% if Model.ContentItem.Content.Portfolio.ContentItems.size > 0 %}
<!-- Portfolio Grid -->
<section class="bg-light" id="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading text-uppercase">Portfolio</h2>
                <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
            </div>
        </div>
        <div class="row">
            {% for project in Model.ContentItem.Content.Portfolio.ContentItems %}
            <div class="col-md-4 col-sm-6 portfolio-item">
                <div class="portfolio-link" data-toggle="modal" href="#portfolioModal{{ forloop.index }}">
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fas fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img class="img-fluid" src="{{ project.Project.Image.Paths.first | asset_url | resize_url: width:480, height: 480, mode: 'stretch' }}" alt="{{ project.DisplayText }}">
                </div>
                <div class="portfolio-caption">
                    <h4>{{ project.DisplayText }}</h4>
                    <p class="text-muted">{{ project.Project.Category.Text }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

{% if Model.ContentItem.Content.About.ContentItems.size > 0 %}
<!-- About -->
<section id="about">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading text-uppercase">About</h2>
                <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <ul class="timeline">
                    {% for milestone in Model.ContentItem.Content.About.ContentItems %}
                    <li class="{% cycle '', 'timeline-inverted' %}">
                        <div class="timeline-image">
                            <img class="rounded-circle img-fluid" src="{{ milestone.Milestone.Image.Paths.first | asset_url | resize_url: width:160, height: 160, mode: 'stretch' }}" alt="">
                        </div>
                        <div class="timeline-panel">
                            <div class="timeline-heading">
                                <h4>{{ milestone.Milestone.Date.Text }}</h4>
                                <h4 class="subheading">{{ milestone.DisplayText }}</h4>
                            </div>
                            <div class="timeline-body">
                                <p class="text-muted">{{ milestone.HtmlBodyPart.Html }}</p>
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                    <li class="timeline-inverted">
                        <div class="timeline-image">
                            <h4>
                                Be Part
                                <br>Of Our
                                <br>Story!
                            </h4>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
{% endif %}

{% if Model.ContentItem.Content.Team.ContentItems.size > 0 %}
<!-- Team -->
<section class="bg-light" id="team">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading text-uppercase">Our Amazing Team</h2>
                <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
            </div>
        </div>
        <div class="row">
            {% for member in Model.ContentItem.Content.Team.ContentItems %}
            <div class="col-sm-4">
                <div class="team-member">
                    <img class="mx-auto rounded-circle" src="{{ member.TeamMember.Picture.Paths.first | asset_url | resize_url: width:240, height: 240, mode: 'stretch' }}" alt="">
                    <h4>{{ member.DisplayText }}</h4>
                    <p class="text-muted">{{ member.TeamMember.Occupation.Text }}</p>
                    <ul class="list-inline social-buttons">
                        {% if member.TeamMember.Twitter.Text.size > 0 %}
                        <li class="list-inline-item">
                            <a href="https://www.twitter.com/{{ member.TeamMember.Twitter.Text }}">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                        {% endif %}
                        {% if member.TeamMember.Facebook.Text.size > 0 %}
                        <li class="list-inline-item">
                            <a href="https://www.facebook.com/{{ member.TeamMember.Facebook.Text }}">
                                <i class="fab fa-facebook"></i>
                            </a>
                        </li>
                        {% endif %}
                        {% if member.TeamMember.LinkedIn.Text.size > 0 %}
                        <li class="list-inline-item">
                            <a href="https://www.linkedin.com/in/{{ member.TeamMember.LinkedIn.Text }}">
                                <i class="fab fa-linkedin"></i>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>
            </div>
        </div>
    </div>
</section>
{% endif %}

{% if Model.ContentItem.Content.Clients.ContentItems.size > 0 %}
<!-- Clients -->
<section class="py-5">
    <div class="container">
        <div class="row">
            {% for client in Model.ContentItem.Content.Clients.ContentItems %}
            <div class="col-md-3 col-sm-6">
                <a href="{{ client.Client.Url.Text }}">
                    <img class="img-fluid d-block mx-auto" src="{{ client.Client.Logo.Paths.first | asset_url }}" alt="">
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- Contact -->
<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading text-uppercase">Contact Us</h2>
                <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <form id="contactForm" name="sentMessage" novalidate>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <input class="form-control" id="name" type="text" placeholder="Your Name *" required data-validation-required-message="Please enter your name.">
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                <input class="form-control" id="email" type="email" placeholder="Your Email *" required data-validation-required-message="Please enter your email address.">
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required data-validation-required-message="Please enter your phone number.">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <textarea class="form-control" id="message" placeholder="Your Message *" required data-validation-required-message="Please enter a message."></textarea>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-lg-12 text-center">
                            <div id="success"></div>
                            <button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Send Message</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- Modals -->
{% for project in Model.ContentItem.Content.Portfolio.ContentItems %}
<div class="portfolio-modal modal fade" id="portfolioModal{{ forloop.index }}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl"></div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2 class="text-uppercase">{{ project.DisplayText }}</h2>
                            <p class="item-intro text-muted">{{ project.Project.Category.Text }}</p>
                            <img class="img-fluid d-block mx-auto" src="{{ project.Project.Image.Paths.first | asset_url | resize_url: width:480, height: 480, mode: 'max' }}" alt="{{ project.DisplayText }}">
                            <p>{{ project.HtmlBodyPart.Html | raw }}</p>
                            {% comment %}
                            <ul class="list-inline">
                                <li>Date: January 2017</li>
                                <li>Client: Threads</li>
                                <li>Category: Illustration</li>
                            </ul>
                            {% endcomment %}
                            <button class="btn btn-primary" data-dismiss="modal" type="button">
                                <i class="fa fa-times"></i>
                                Close Project
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endfor %}